<template>
  <div id="headImg">
    <div id="myPhoto">
      <div class="viewPhoto" @click="monidianji">
        <i class="el-icon-plus"></i>
        <img
          :src="imageSave"
          alt=""
          id="portrait"
          style="width: 350px; height: 200px"
        />
      </div>
      <p>
        狗狗图片<br />
        提示：请选择本地图片上传，支持各种图片格式<br />
        上方选择图片
      </p>
      <!-- <div class="block">
        <span class="demonstration">违法时间</span>
        <el-date-picker
          v-model="times"
          type="datetime"
          placeholder="选择日期时间"
        >
        </el-date-picker>
      </div> -->
      <div class="myText">
        <p>犬主姓名</p>
        <el-input placeholder="请输入内容" v-model="name" clearable> </el-input>
        <p>违法地点</p>
        <el-input placeholder="请输入内容" v-model="address" clearable>
        </el-input>
      </div>
      <div class="myText">
        <p>违法行为</p>
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="textarea1"
        >
        </el-input>

        <p>处罚结果</p>
        <el-input
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
          v-model="textarea2"
        >
        </el-input>
      </div>

      <div class="listBox">
        <input type="file" id="saveImage" name="myphoto" />
      </div>

      <div class="save">
        <el-button type="danger" size="small" @click="imageSubmit"
          >保存</el-button
        >
        <div style="margin-bottom: 70px; padding-top: 30px"></div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      imageSave: "", //图片路径

      times: "",
      name: "",
      address: "",
      textarea1: '',
      textarea2: '',
    };
  },

  methods: {
    monidianji() {
      document.getElementById("saveImage").click();
    },
    yulan() {
      document.getElementById("saveImage").onchange = function () {
        var imgFile = this.files[0];
        var fr = new FileReader();
        fr.onload = function () {
          document.getElementById("portrait").src = fr.result;
        };
        fr.readAsDataURL(imgFile);
      };
    },
    imageSubmit() {
      console.log(this.times);
      let _this = this;
      let x = document.getElementById("saveImage").files[0];
      let params = new FormData(); //创建一个form对象
      params.append("file", x); //append 向form表单添加数据
      params.append("name", this.name);
      params.append("address", this.address);
      //params.append("times", this.times);
      params.append("actives", this.textarea1);
      params.append("results", this.textarea2);
      //添加请求头  通过form添加的图片和文件的格式必须是multipart/form-data
      let config = { headers: { "Content-Type": "multipart/form-data" } };
      //发起ajax请求存放在服务端
      this.$axios
        .post("http://localhost:7071/uploadPunish", params, config)
        .then(function (res) {
          
          _this.$notify({
            type: "success",
            message: "保存成功!",
            offset: 160,
          });
        })
        .catch(function (error) {
          console.log(error);
          _this.$notify({
            type: "warning",
            message: "保存失败!",
            offset: 160,
          });
        });
    },
  },
  mounted() {
    this.yulan(); //预览图片
  },
  computed: {},
};
</script>
<style scoped>
#headImg {
  margin-left: 50px;
}
.viewPhoto {
  border: 1px rgba(99, 199, 210, 0.79) dashed;
  width: 350px;
  height: 200px;
}
.myText {
  width: 350px;
}
#saveImage {
  display: none;
}
.save {
  margin: 30px auto;
}
.viewPhoto {
  position: relative;
}
.el-icon-plus {
  font-size: 50px;
  color: rgba(99, 199, 210, 0.79);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 50%;
  text-align: center;
}
</style>
